<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      :data="query.baseParams"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="beanName" title="类注解" :item-render="{}">
        <template #default="{data}">
          <vxe-input v-model.trim="data.beanName" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="methodName" title="方法名" :item-render="{}">
        <template #default="{data}">
          <vxe-input v-model.trim="data.methodName" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

    <vxe-toolbar custom>
      <template #buttons>
        <vxe-button status="success" @click="showModal('create',{})">新增</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      :loading="tableLoading"
      :column-config="{resizable: true}"
      :data="tableData"
      height="500"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="40" />
      <vxe-column field="beanName" title="类注解" />
      <vxe-column field="methodName" title="方法名" />
      <vxe-column field="params" title="参数" />
      <vxe-column field="cronExpression" title="cron表达式" />
      <vxe-column field="status" title="任务状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="primary">正常</el-tag>
          <el-tag v-if="scope.row.status === 2" type="info">暂停</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="op" title="操作">
        <template #default="scope">
          <el-button-group>
            <vxe-button status="primary" :disabled="scope.row.status===1" type="text" @click="showModal('update',scope.row)">编辑</vxe-button>
            <vxe-button status="danger" :disabled="scope.row.status===1" type="text" @click="deleteTableRow(scope.row.id)">删除</vxe-button>
            <vxe-button status="primary" type="text" @click="runTask('run',scope.row.id)">执行</vxe-button>
            <vxe-button status="danger" :disabled="scope.row.status===2" type="text" @click="runTask('pause',scope.row.id)">暂停</vxe-button>
            <vxe-button status="primary" :disabled="scope.row.status===1" type="text" @click="runTask('resume',scope.row.id)">恢复</vxe-button>
          </el-button-group>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      :current-page.sync="query.page.currentPage"
      :page-size.sync="query.page.pageSize"
      :total="tableTotalRow"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="changePage"
    />
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />

  </div>
</template>

<script>
import Api from '@/api/upms/job'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
export default {
  name: 'UpmsJob',
  components: { CreateDialog, UpdateDialog },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          beanName: '',
          methodName: ''
        }
      },
      dialogs: {
      }
    }
  },
  computed: {

  },
  mounted() {
  },
  methods: {
    runTask(command, id) {
      const arr = { delete: '删除', run: '立即执行', resume: '恢复', pause: '暂停' }
      this.$confirm(arr[command], '提示').then((value) => {
        Api.doTask(id, command).then(({ code, msg }) => {
          if (code === 200200) {
            this.loadTable()
          }
          this.$message({ type: code === 200200 ? 'success' : 'error', message: msg || (arr[command] + '成功') })
        })
      }).catch(() => {})
    }
  }
}
</script>

<style>

</style>
